<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-cell title="充值积分" size="large" />
    <div class="points">
      <h4 style="font-size: 32px">{{ chargeVal }}积分</h4>
    </div>
    <van-form @submit="onSubmit">
      <div style="margin: 32px">
        <van-button round block type="info" native-type="submit"
          >立即充值</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { getWxRetailerById } from "@/api/member";
import { get_jsapi_sign } from "@/api/utils";
import { wechatPay } from "@/api/wechat";

export default {
  name: "Recharger",
  components: {
    NavBar,
  },

  props: ["retailer_id", "point"],
  data() {
    return {
      title: this.$route.meta.title,
      chargeVal: +this.point,
      ratio: 100,
    };
  },
  mounted() {
    this.getRetailerInfo();
    this.getJsApiSign();
  },
  methods: {
    getRetailerInfo() {
      getWxRetailerById(this.retailer_id)
        .then((res) => {
          this.ratio = res.data.ratio || 100;
        })
        .catch(() => {
          this.$toast("获取信息错误!");
        });
    },
    getJsApiSign() {
      const url = location.href.split("#")[0];
      get_jsapi_sign(url)
        .then((res) => {
          const sign = res.data;
          this.$wx.config({
            debug: false,
            appId: sign.appId,
            timestamp: sign.timestamp,
            nonceStr: sign.nonceStr,
            signature: sign.signature,
            jsApiList: [
              "chooseWXPay",
              // "openAddress",
              // "openLocation",
              // "getLocation",
            ],
          });
        })
        .catch((error) => {
          console.log(error.message);
        });
    },
    onSubmit(values) {
      const openid = localStorage.getItem("openid");

      values["openid"] = openid;
      values["retailer_id"] = this.retailer_id;
      values["score"] = this.chargeVal;
      values["money"] = this.chargeVal * this.ratio * 0.01;
      console.log(values);

      wechatPay(values)
        .then((res) => {
          console.log("pay::", res);
          // this.$dialog({ message: JSON.stringify(res.data) });
          let _this = this;
          this.$toast(res);
          const data = res.data;
          this.$wx.chooseWXPay({
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            package: data.package,
            signType: data.signType,
            paySign: data.paySign,
            success: function (res) {
              // console.log(res);
              if (res.errMsg == "chooseWXPay:ok") {
                _this.$toast.success("充值成功!");
                _this.$router.push("/retailer");
              } else {
                _this.$toast.fail("充值失败");
              }
            },
            cancel: function () {
              _this.$toast.fail("充值失败!");
            },
            fail: function () {
              _this.$toast.fail("充值失败!!");
              _this.$router.push("/retailer");
            },
          });
        })
        .catch(() => {
          this.$toast("充值失败Error!!");
        });
    },
  },
};
</script>

<style  scoped>
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background-color: #f2f3f5;
}
</style>